<template>
  <div>
    <el-main>
      <el-row :gutter="10" style="margin:0px">
        <el-col :span="14" :xs="24" style="padding: 0;">
          <el-row class="form_vt">
            <el-col class="form_top">
              <el-card shadow="never">
                <el-row>
                  <el-col class="f_t_title">企业走访管理<el-button type="primary" round class="xs" @click="table = true">
                      企业信息→</el-button>
                  </el-col>
                  <el-col class="f_t_box">
                    <el-form ref="form" :model="form_admin" label-width="100px">
                      <el-row :gutter="20">
                        <el-col :span="12" class="xl">
                          <el-form-item label="企业名称">
                            <el-input :disabled="true" v-model="form_admin.company_name"></el-input>
                          </el-form-item>
                          <el-form-item label="联系人">
                            <el-input v-model="form_admin.people"></el-input>
                          </el-form-item>
                          <el-form-item label="走访人员">
                            <el-select v-model="form_admin.work_id" multiple filterable placeholder="">
                              <el-option v-for="item in Visitpeoplelist" :key="item.id" :label="item.username"
                                :value="item.id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12" class="xl">
                          <el-form-item label="邮箱">
                            <el-input v-model="form_admin.email"></el-input>
                          </el-form-item>
                          <el-form-item label="联系方式">
                            <el-input v-model="form_admin.phone"></el-input>
                          </el-form-item>
                          <el-form-item class="Visitdate" label="走访时间">
                            <el-col>
                              <el-date-picker type="datetime" placeholder="" v-model="form_admin.v_time"
                                value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;">
                              </el-date-picker>
                            </el-col>
                          </el-form-item>
                        </el-col>
                        <el-col class="xs">
                          <el-form-item label="企业名称">
                            <el-input :disabled="true" v-model="form_admin.company_name"></el-input>
                          </el-form-item>
                          <el-form-item label="邮箱">
                            <el-input v-model="form_admin.email"></el-input>
                          </el-form-item>
                          <el-form-item label="联系人">
                            <el-input v-model="form_admin.people"></el-input>
                          </el-form-item>
                          <el-form-item label="联系方式">
                            <el-input v-model="form_admin.phone"></el-input>
                          </el-form-item>
                          <el-form-item label="走访人员">
                            <el-select v-model="form_admin.work_id" multiple placeholder="">
                              <el-option v-for="item in Visitpeoplelist" :key="item.id" :label="item.username"
                                :value="item.id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item class="Visitdate" label="走访时间">
                            <el-col>
                              <el-date-picker type="datetime" placeholder="" v-model="form_admin.v_time"
                                value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;">
                              </el-date-picker>
                            </el-col>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-form-item label="走访照片">
                        <el-upload multiple :on-exceed="imgexceed" :action='action' ref="upload1"
                          list-type="picture-card" :on-change="handleChange" :before-upload="beforeAlbumUpload"
                          :file-list="fileList" accept=".jpg,.jpeg,.png,.gif">
                          <i slot="default" class="el-icon-plus"></i>
                          <div slot="file" slot-scope="{file}">
                            <img style="position: absolute;" class="el-upload-list__item-thumbnail" :src="file.url"
                              alt="">
                            <span class="el-upload-list__item-actions">
                              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                              </span>
                              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                              </span>
                            </span>
                          </div>
                        </el-upload>
                        <el-dialog :visible.sync="d_img">
                          <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                      </el-form-item>
                      <el-form-item label="企业标签">
                        <div>
                          <el-tag v-for="item in defaultLabel" :key="item.id" class="b_bule">{{
                            item.name
                          }}</el-tag>
                        </div>
                        <div
                          :style="[{ 'border-top': (form_admin.label.length > 0 ? '1px solid #DCDFE6' : '') }, { 'min-height': (adddemandType ? '41px' : '') }]">
                          <el-tag v-for="item in form_admin.label" :key="item.id + 'enterprise'"
                            class="b_bule bule_active">{{ item.name }}</el-tag>
                        </div>
                        <el-button class="button_from_i" type="primary" round @click="adddemandType = !adddemandType">
                          {{ adddemandType? '保存标签 —': '修改标签 +' }}</el-button>
                        <div v-if="adddemandType">
                          <el-tag @click="labelChange(item)"
                            :class="form_admin.label.includes(item) ? 'bule_active' : ''"
                            v-for="item in companylabelList" :key="item.id" class="b_bule">{{ item.name }}</el-tag>
                        </div>
                      </el-form-item>
                      <el-form-item label="走访记录">
                        <el-input :autosize="{ minRows: 3, maxRows: 10 }" type="textarea" v-model="form_admin.des">
                        </el-input>
                      </el-form-item>
                    </el-form>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>

            <el-col class="form_button">
              <el-card shadow="never">
                <el-form :ref="'ref' + index" :model="item" label-width="100px" v-for="(item, index) in form"
                  :key="index">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item :label="'需求' + (index + 1)">
                        <el-input :autosize="{ minRows: 3, maxRows: 10 }" type="textarea" v-model="item.des">
                        </el-input>
                      </el-form-item>
                      <el-button v-if="index != 0" class="Delete_b" @click="deleteDialog(index)" type="danger"
                        icon="el-icon-close"></el-button>
                    </el-col>
                    <el-col>
                      <el-row class="xs">
                        <el-col>
                          <el-form-item label="解决人">
                            <el-select value-key="id" filterable v-model="form[index].complete.so_id" multiple
                              placeholder="" style="width:initial">
                              <el-option v-for="item in SolverList" :key="item.id" :label="item.username"
                                :value="item.id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col>
                          <el-form-item label="需求标签">
                            <div>
                              <el-tag v-for="(item_, index_) in form[index].label" :key="item_.id"
                                class="b_bule b_red red_active">{{ item_.name }}</el-tag>
                            </div>
                            <el-button class="button_from_i" type="primary" round @click="item.addType = !item.addType">
                              {{ item.addType ? '保存标签 —' : '添加标签 +' }}</el-button>
                            <div v-if="item.addType">
                              <el-tag @click="labelChange(item_, index)"
                                :class="form[index].label.includes(item_) ? 'red_active' : ''"
                                v-for="(item_, index_) in labelList" :key="item_.id" class="b_bule b_red">{{
                                  item_.name
                                }}</el-tag>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col>
                          <el-form-item class="" label="期望解决时间">
                            <el-date-picker type="datetime" placeholder="" v-model="item.solve_time"
                              style="min-width: 27%;" value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col class="qw_date xl">
                      <el-row>
                        <el-col>
                          <el-form-item label="解决人">
                            <el-select value-key="id" filterable v-model="form[index].complete.so_id" multiple
                              placeholder="" style="width:initial">
                              <el-option v-for="item in SolverList" :key="item.id" :label="item.username"
                                :value="item.id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row>

                      <el-form-item label="需求标签">
                        <div>
                          <el-tag v-for="(item_, index_) in form[index].label" :key="item_.id"
                            class="b_bule b_red red_active">{{ item_.name }}</el-tag>
                        </div>
                        <el-button class="button_from_i" type="primary" round @click="item.addType = !item.addType">
                          {{ item.addType ? '保存标签 —' : '添加标签 +' }}</el-button>
                        <div v-if="item.addType">
                          <el-tag @click="labelChange(item_, index)"
                            :class="form[index].label.includes(item_) ? 'red_active' : ''"
                            v-for="(item_, index_) in labelList" :key="item_.id" class="b_bule b_red">{{
                              item_.name
                            }}</el-tag>
                        </div>
                      </el-form-item>
                      <el-form-item class="" label="期望解决时间">
                        <el-date-picker type="datetime" placeholder="" v-model="item.solve_time" style="min-width: 27%;"
                          value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col v-if="addPlanArr[index]">
                      <div>
                        <el-row :gutter="20">
                          <el-col :span="12" :xs="24">
                            <el-form-item label="解决时间">
                              <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder=""
                                :disabled="true" v-model="form[index].complete.so_time" style="width: ;">
                              </el-date-picker>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </div>

                      <el-form-item label="解决方案">
                        <el-input disabled type="textarea" v-model="form[index].complete.solve_des"
                          :autosize="{ minRows: 3, maxRows: 10 }">
                        </el-input>
                      </el-form-item>

                      <el-form-item label="上传解决方案" class="upload_box">
                        <el-upload class="upload-demo1" ref="upload2" action="" :disabled="true"
                          :on-preview="ClickProgramme" :file-list="form[index].complete.fileList" :auto-upload="false">
                          <el-button class="button_from_i" slot="trigger" size="small" type="primary">解决方案 +</el-button>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :offset="16" :span="8" class="bo_primary">
                      <div class="primary_box" v-if="addPlanArr[index]">
                        <el-button size="mini" class="xl" type="info" round @click="addprogramme(index, item)">修改
                        </el-button>
                        <el-button size="mini" class="xl" type="primary" round @click="PushProgramme(index)">推送
                        </el-button>
                      </div>
                      <div v-else style="margin-left:50%">
                        <el-button class="button_from_i bo_primary_i xl" type="primary" round style="width: 50%"
                          @click="addprogramme(index, item)">添加解决方案
                          +</el-button>
                      </div>
                    </el-col>
                    <el-col class="bo_primary">
                      <div class="primary_box" v-if="addPlanArr[index]">
                        <el-button size="mini" class="xs" type="info" round @click="addprogramme(index, item)">修改
                        </el-button>
                        <el-button size="mini" class="xs" type="primary" round @click="PushProgramme(index)">推送
                        </el-button>
                      </div>
                      <el-button v-else class="button_from_i bo_primary_i xs" style="margin-top: 15px;" type="primary"
                        round @click="addprogramme(index, item)">添加解决方案 +
                      </el-button>
                    </el-col>
                  </el-row>

                  <el-divider></el-divider>
                </el-form>
                <el-button class="button_from_i" type="primary" round @click="add_demand">新增新需求 +</el-button>
              </el-card>
            </el-col>
            <el-col class="b_bon">
              <el-button class="preservation_b" type="primary" @click="onSubmit">保存</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10" class="xl">
          <drawerVisit @update="update" :status_agent='status_agent' :status_update="status_update" :table="table"
            :company_id="company_id" :form_admin='form_admin'></drawerVisit>
        </el-col>
      </el-row>
    </el-main>

    <el-drawer title="企业信息" :visible.sync="table" direction="rtl" size="90%" :before-close="close">
      <drawerVisit @update="update" :status_agent='status_agent' :status_update="status_update" :table="table"
        :company_id="company_id" :form_admin='form_admin' :type="'phone'"></drawerVisit>
    </el-drawer>


    <el-dialog title="添加解决方案" :visible.sync="d_add" @close="closeDialog">
      <el-form ref="form" :model="form[addNum].complete" label-width="100px">
        <div>
          <el-row :gutter="20">
            <el-col :span="12" :xs="24">
              <el-form-item label="解决时间">
                <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder=""
                  v-model="form[addNum].complete.so_time" style="min-width: 27%;">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <el-form-item label="解决方案">
          <el-input type="textarea" v-model="form[addNum].complete.solve_des" :autosize="{ minRows: 3, maxRows: 10 }">
          </el-input>
        </el-form-item>

        <el-form-item label="上传解决方案" class="upload_box">
          <el-upload :limit="1" id="b_upload" class="upload-demo" ref="upload2" :action="action"
            :on-change="upload_success" :on-remove="removeProgramme" :file-list="form[addNum].complete.fileList"
            :before-upload="SolutionUpload">
            <el-button class="button_from_i" slot="trigger" size="small" type="primary">解决方案 +</el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="d_add_empty = true">取消</el-button>
        <el-button type="primary" @click="preservation">保存</el-button>
      </span>

      <el-dialog append-to-body title="警告" :visible.sync="d_add_empty" width="15%">
        <span>取消将清空已输入的内容！</span>
        <span slot="footer" class="">
          <el-button size="mini" @click="d_add_empty = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="empty">确 定</el-button>
        </span>
      </el-dialog>

    </el-dialog>

    <el-dialog title="警告" :visible.sync="delete_Form" width="30%">
      <span>是否删除该需求！</span>
      <span slot="footer" class="">
        <el-button size="mini" @click="delete_Form = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="deleteForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { visitDetail, deamdLabel, editVisit, staff, filefun, companyLabelIndex, pushUser, openidLogin } from '@/api/newuser'
import {
  VUE_APP_BASE_API
} from "@/config.js"
import drawerVisit from '@/views/administrators/work/components/drawerVisit.vue'
import store from '@/store'
import { setToken } from '@/utils/auth'

export default {
  data() {
    return {
      status_agent: null,//0表示没有 1表示数据库有这个信息 需要调用天眼查接口
      status_update: null,//0表示不需要更新了，1表示需要更新 调用天眼查接口
      company_id: null,
      action: `${VUE_APP_BASE_API}/v1/common/file`,
      // user_id: this.$store.state.user.id,
      user_id: JSON.parse(localStorage.getItem('data')).id,
      adddemandType: false,
      adddenterprise: false,
      delete_Form: false,
      d_add_empty: false,
      table: false,
      d_add: false,
      dialogImageUrl: '',
      d_img: false,
      disabled: false,
      defaultLabel: [],
      labelList: [],
      companylabelList: [],
      activeName: 'basic',
      Visitpeoplelist: [],//走访人员
      SolverList: [],//解决人员
      form_admin: { //走访管理
        company_name: '',
        people: '',
        work_id: [],
        email: '',
        phone: '',
        v_time: '',
        des: '',
        label: [],
      },
      form: [
        { //需求管理
          id: null,
          solve_time: '',
          des: '',
          label: [],
          complete: {
            solve_des: '',
            so_id: [],
            so_time: '',
            fileList: [],
          },
          addType: false,
        }
      ],
      fileList: [],
      addNum: 0,
      addPlanArr: [false],
    }
  },
  components: {
    drawerVisit,
  },
  //监听his.form_admin.label
  watch: {
  },
  mounted() {
    // if (!(localStorage.getItem('userId') && localStorage.getItem('data'))) {
    //   this.$router.push({ path: '/web/small/login' })
    // }
    let openid = localStorage.getItem('openid')
    if (openid) {
      openidLogin({ openid: openid }).then(async res => {
        if (res.id) {
          //将res存入localStorage
          localStorage.setItem('data', JSON.stringify(res))
          // console.log(JSON.parse(localStorage.getItem('data')))
          localStorage.setItem('userId', res.id)
          // console.log(res, 'resbinding');
          let demo = await store.commit('user/SET_TOKEN', res.token)
          localStorage.setItem('token', res.token)
          setToken(res.token)

          this.visitDetail()
          this.staff(1)
          this.staff(2)
        } else {
          this.$router.push({ path: '/web/small/login' })
        }
      })
    } else {
      this.$router.push({ path: '/web/small/login' })
    }
  },
  beforeDestroy() {
    localStorage.removeItem('PatentNumber')
  },
  methods: {
    update() {
      this.visitDetail()
    },
    companyLabelIndex(label_name) {//企业标签
      companyLabelIndex().then(res => {
        this.companylabelList = res
        this.companylabelList.map((res_, index) => {
          label_name.map((res_1, index) => {
            if (res_1.id == res_.id) {
              this.form_admin.label.push(res_)
            }
          })
        })
      })
    },
    deamdLabel(index, label_arr) {//需求标签获取
      deamdLabel().then(res => {
        this.labelList = res
        this.labelList.map((res_, index_) => {
          label_arr.map(res_1 => {
            if (res_1.id == res_.id) {
              this.form[index].label.push(res_)
              // console.log('添加');
            }
          })
        })

      })
    },
    staff(type) {//走访人员列表
      staff({
        id: this.user_id,
        type: type
      }).then(res => {
        if (type == 1) {
          this.Visitpeoplelist = res
        } else {
          this.SolverList = res
        }
      })
    },
    visitDetail() {
      visitDetail({
        id: this.$route.query.id,
        demand_id: this.$route.query.demand_id ? this.$route.query.demand_id : '',
      }).then(res => {
        this.status_agent = res.status_agent
        this.status_update = res.status_update
        this.form_admin.company_name = res.company_name
        this.form_admin.people = res.people
        this.form_admin.work_id = res.work_id.split(',').map(item => {
          return Number(item)
        })


        let imgList = []
        if (res.images) {
          res.images.map(res_ => {
            let imgObj = {
              url: ''
            }
            imgObj.url = res_
            imgList.push(imgObj)

          })
        }
        this.fileList = imgList
        this.form_admin.email = res.email
        this.form_admin.phone = res.phone
        this.form_admin.v_time = res.v_time
        this.form_admin.des = res.des
        this.defaultLabel = res.label_true_name
        // this.form_admin.label = res.label_name//企业标签
        this.companyLabelIndex(res.label_name)
        this.company_id = res.company_id

        if (res.demand.length) {
          for (let i = 0; i < res.demand.length - 1; i++) {
            this.add_demand()
          }
        }
        if (res.demand.length > 0) {
          res.demand.map((res, index) => {
            this.form[index].id = res.id
            this.form[index].des = res.des
            this.form[index].solve_time = res.solve_time
            // this.form[index].label = res.label_arr
            if (index == 0) {//只请求一次全部列表
              this.deamdLabel(index, res.label_arr)
            }
            if (res.solve_file.length > 2) {
              this.form[index].complete.fileList.push({
                url: res.solve_file,
                name: res.solve_name
              })
            }
            if (res.status == 1) {
              this.addPlanArr[index] = true
            }
            if (res.so_id.length == 0) {
              this.form[index].complete.so_id = []
            } else {
              this.form[index].complete.so_id = res.so_id.split(',').map(item => {
                if (item) {
                  return Number(item)
                }
              })
            }
            // console.log(this.form[index].complete.so_id, 'res.so_id.');

            this.form[index].complete.solve_des = res.solve_des
            this.form[index].complete.so_time = res.so_time
          })
        } else {
          this.deamdLabel(0, [])
        }


      })
    },
    labelChange(item, index) {
      if (index != undefined) {
        if (this.form[index].label.includes(item)) {
          this.form[index].label.splice(this.form[index].label.indexOf(item), 1)
        } else {
          this.form[index].label.push(item)
        }
      } else {
        // console.log(this.form_admin.label.includes(item));
        if (this.form_admin.label.includes(item)) {
          this.form_admin.label.splice(this.form_admin.label.indexOf(item), 1)
        } else {
          this.form_admin.label.push(item)
        }
      }
    },
    preservation() {
      this.addPlanArr.splice(this.addNum, 1, true)
      this.addNum = 0
      this.d_add = false
    },
    closeDialog() {
      this.addNum = 0
      this.d_add = false
    },
    empty() {
      this.form[this.addNum].complete = {
        solve_des: '',
        so_id: [],
        so_time: '',
        fileList: [],
      }
      let b_dom = document.getElementById('b_upload').getElementsByClassName('el-upload')

      b_dom[0].style.display = 'inline-block'

      this.addNum = 0
      this.d_add_empty = false
      this.d_add = false
    },
    deleteDialog(index) {
      this.delete_Form = true
      this.addNum = index
      // console.log(this.addNum);
    },
    deleteForm(index) {
      this.form.splice(this.addNum, 1)
      // console.log(this.addNum);
      // console.log(this.form);
      // console.log(this.form[this.addNum]);
      this.addPlanArr.splice(this.addNum, 1)
      this.addNum = 0
      this.delete_Form = false
    },
    close() {
      this.table = false
    },
    add_demand() {
      let obj = {
        id: null,
        Visitdate: '',
        des: '',
        label: [],
        complete: {
          solve_des: '',
          so_id: [],
          so_time: '',
          fileList: [],
        },
        addType: false,
      }
      this.addPlanArr.push(false)
      this.form.push(obj)
    },
    handleClick() {
    },
    onSubmit() {
      let newimages
      newimages = this.fileList.map(item => {
        if (item.response) {
          return item.response.data.url

        } else {
          return item.url
        }
      }).join(',')
      let demandObj = [{
        id: null,
        label: "",
        solve_time: "",
        des: "",
        so_id: Number,
        so_time: "",
        solve_des: "",
        solve_file: ""
      }]
      if (this.form.length) {
        if (this.form.length == 1) {

        } else {
          for (let i = 0; i < this.form.length - 1; i++) {
            demandObj.push({
              id: null,
              label: "",
              solve_time: "",
              des: "",
              so_id: Number,
              so_time: "",
              solve_des: "",
              solve_file: ""
            })
          }
        }

      }

      demandObj.map((item, index) => {
        item.id = Number(this.form[index].id)
        item.label = this.form[index].label.map(res => {
          return Number(res.id)
        }).join(',')
        item.solve_time = this.form[index].solve_time
        item.des = this.form[index].des

        item.so_id = this.form[index].complete.so_id.join(',')
        // console.log(this.form[index].complete.so_id);
        item.so_time = this.form[index].complete.so_time
        item.solve_des = this.form[index].complete.solve_des
        item.solve_file = this.form[index].complete.fileList.map(item => {
          if (item.response) {
            return item.response.data.url
          }
          else {
            return item.url
          }
        }).join(',')
        item.solve_name = this.form[index].complete.fileList.map(item => {
          if (item.response) {
            return item.name
          }
          else {
            return item.name
          }
        }).join(',')
      })


      let newform = {
        id: Number(this.$route.query.id),
        people: this.form_admin.people,
        phone: this.form_admin.phone,
        email: this.form_admin.email,
        images: newimages,
        des: this.form_admin.des,
        v_time: this.form_admin.v_time,
        company_id: this.company_id,
        demand: demandObj,
        label: this.form_admin.label.map(item => {
          return Number(item.id)
        }).join(','),
        work_id: this.form_admin.work_id.map(item => {
          return Number(item)
        }).join(',')
      }
      editVisit(newform).then(res => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        if (res.push_work_id) {
          pushUser({
            user_id: res.push_work_id,
            type: 1,
            time: this.form_admin.v_time,
            company: this.form_admin.company_name,
          }).then(res_ => {
            this.$message.success('公众号推送成功')
          })

          //短信推送
          sendInfo({
            user_id: res.push_work_id,
            type: 1,
            time: this.form_admin.v_time,
            company: this.form_admin.company_name,
          }).then(res_ => {
            this.$message.success('短信推送成功')
          })
        }
        if (res.so_work_id) {
          pushUser({
            user_id: res.so_work_id,
            type: 2,
            time: this.form_admin.v_time,
            company: this.form_admin.company_name,
          }).then(res_ => {
            this.$message.success('公众号推送成功')
          })

          //短信推送
          sendInfo({
            user_id: res.push_work_id,
            type: 2,
            time: this.form_admin.v_time,
            company: this.form_admin.company_name,
          }).then(res_ => {
            this.$message.success('短信推送成功')
          })
        }

        this.$router.go(-1)
        // this.$router.push(
        //   {
        //     path: '/workWaitvisit',
        //     query: {
        //       type: 4
        //     }
        //   }
        // )
      })

    },
    addprogramme(index, item) {
      if (item.des && item.solve_time) {
        this.addNum = index
        this.d_add = true
        if (this.form[index].complete.fileList.length == 0) {
          this.$nextTick(() => {
            let b_dom = document.getElementById('b_upload').getElementsByClassName('el-upload')
            b_dom[0].style.display = 'inline-block'
          })
        } else {
          this.$nextTick(() => {
            let b_dom = document.getElementById('b_upload').getElementsByClassName('el-upload')
            b_dom[0].style.display = 'none'
          })
        }
      } else {
        if (!item.des) {
          this.$message.error('请填写需求')
        } else if (!item.solve_time) {
          this.$message.error('请填写解决时间')
        }
      }

    },
    PushProgramme(index) {
      // console.log(this.form[index].complete.so_id.join(','));
      pushUser({
        user_id: this.form[index].complete.so_id.join(','),
        type: 2,
        time: this.form_admin.v_time,
        company: this.form_admin.company_name,
      }).then(res => {
        this.$message({
          message: '推送成功',
          type: 'success'
        })
      })
    },
    removeProgramme(file) {
      let b_dom = document.getElementById('b_upload').getElementsByClassName('el-upload')
      b_dom[0].style.display = 'inline-block'
      this.form[this.addNum].complete.fileList = []
    },
    handleRemove(file) {
      // 1.获取将要删除图片的临时路径
      const filePath = file.url
      // 2.从pics数组中，找到图片对应的索引值
      const i = this.fileList.findIndex(x => x.url === filePath)
      // 3.调用splice方法，移除图片信息
      this.fileList.splice(i, 1)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.d_img = true;
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    imgexceed() {
      this.$message.error('最大上传四张图片!');
    },
    beforeAlbumUpload(file) {//上传前验证
      const isIMG = file.type.slice(0, 5) === 'image';
      if (!isIMG) {
        this.$message.error('请上传图片!');
      }
      return isIMG
    },
    SolutionUpload(file) {
      const isIMG = file.type.slice(0, 5) === 'image';
      if (isIMG) {
        this.$message.error('请上传文件!');
      }
      return !isIMG
    },
    handleRequest(file, fileList) {
      this.filefun(file)
    },

    upload_success(file, fileList) {
      this.form[this.addNum].complete.fileList = fileList
      let b_dom = document.getElementById('b_upload').getElementsByClassName('el-upload')
      b_dom[0].style.display = 'none'
    },
    ClickProgramme(file) {
      // console.log(file);
      if (file.response) {
        window.open(file.response.data.url)
      } else {
        window.open(file.url)
      }
      // window.location.href = file.response.data.url + '?' + 'attname=' + file.response.data.name
      // window.location.href = file.url + '?' + 'attname=' + file.name
      //下载文件    
      // let aDom = document.createElement('a');
      // aDom.style.display = 'none';
      // aDom.href = file.response.data.url;
      // aDom.setAttribute('download', file.response.data.name);
      // document.body.appendChild(aDom); 
      // aDom.click();
      // document.body.removeChild(aDom);
    },
    filefun(file) {
      filefun({
        file: 'blob:http://localhost:9528/3e21aa20-1af7-48c4-a2c1-88dd8fc995dd',
      }).then(res => {
      })
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .el-drawer__header {
  margin-bottom: 20px;
  display: none;
}

::v-deep .el-form-item .el-form-item__label {
  font-size: 16px;
  width: 100px;
  font-weight: initial;
  text-align: initial
}

::v-deep .el-select {
  width: 100%;
}

::v-deep .el-input__inner {
  height: 38px;
  line-height: 38px;
  font-size: 16px;
}

::v-deep .Visitdate .el-form-item__content .el-col {
  padding: 0 !important;
}

::v-deep .qw_date .el-form-item__label {
  width: 120px !important;
  margin-left: 120px;
}

::v-deep .qw_date .el-form-item__content .el-date-editor {
  width: 150px;
}

::v-deep .v_tabs .el-tabs__header .el-tabs__nav {
  // width: 100%;
  // display: flex;
  // justify-content: space-around;
}

// ::v-deep .v_tabs .el-tabs__header .el-tabs__nav .el-tabs__item {
//   padding: 0 50px;
// }

::v-deep .card_v .el-card__body {
  padding: 0;

  .el-tabs .el-tabs__content {
    padding: 0 20px;

    tr th {
      font-size: 16px;
    }

    tr td {
      font-size: 16px;
    }
  }
}

.d_boreder {
  border-bottom: 5px solid #eeeff2;
  margin-bottom: 20px;
}

::v-deep .descriptions_1 .el-descriptions__body .el-descriptions__table tbody:nth-child(1) {
  tr:nth-child(1) {
    color: #808596;
  }

  tr:nth-child(2) {
    color: #4682d7;
  }
}

// ::v-deep .descriptions_2 .el-descriptions__body .el-descriptions__table tbody tr th:nth-child(1),
// ::v-deep .descriptions_2 .el-descriptions__body .el-descriptions__table tbody tr td:nth-child(1){
//   border-right: 1px solid black;
// }
// ::v-deep .descriptions_2 .el-descriptions__body .el-descriptions__table tbody tr th:nth-child(2),
// ::v-deep .descriptions_2 .el-descriptions__body .el-descriptions__table tbody tr td:nth-child(2){
//   padding: 0 10px;
// }
::v-deep .el-descriptions__body .el-descriptions__table tbody tr:nth-child(1) th {
  padding-bottom: 0;
}

.b_bon {
  margin: 20px 0;
  display: flex;
}

.button_from_i {
  min-width: 161px;
  height: 38px;
  line-height: 0px;
  font-size: 14px;
  color: #3377FF;
  background-color: #ebf2ff;
  border: 1px solid #387DFF;
  border-radius: 30px;
}

.el-main {
  margin-right: 15px;
  border-radius: 5px;
  margin: 25px 30px 0 30px;
  background-color: #f4f5f7;
}

.f_t_title {
  font-weight: bolder;
  font-size: 24px;
  margin-bottom: 25px;

  button {
    float: right;
    padding: 9px 15px;
  }
}

.b_bule {
  background-color: #D3E2FF;
  margin: 3px 5px;
  border-radius: 5px;
  color: #4585FF;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  border: 0;
  cursor: pointer;

}

.b_red {
  color: #FF5F58;
  background-color: #FFF6F5;
}

.b_red2 {
  color: #FFFFFF;
  background-color: #FF5F58;
}

.bule_active {
  background-color: #387DFF;
  color: #fff;
}

.red_active {
  color: #FFF6F5 !important;
  background-color: #FF5F58 !important;
}

.bo_primary {
  // height: 75px;
  // line-height: 75px;
  display: flex;
  justify-content: center;
  flex-direction: column;

  ::v-deep .primary_box {
    height: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: unset;

    .el-button {
      height: 30px;
      margin-left: 10px;
      width: 100%;
    }
  }

}

::v-deep .primary_box {
  .xs {
    width: 100%;
    margin: 5px 0;
  }
}

.Delete_b {
  position: absolute;
  top: -10px;
  left: 0px;
  padding: 2px 3px;
}

.form_top {
  margin-bottom: 15px;
}

.bo_primary_i {
  margin-left: 5px;
  background-color: #387DFF;
  color: #FFFFFF;
}

.preservation_b {
  margin: 0;
  color: #FFF;
  padding: 5px 35px;
  width: 139px;
  height: 38px;
  background: #387DFF;
  border: 1px solid #E8ECEF;
  border-radius: 19px;
  font-size: 16px;
}

::v-deep .upload_box .el-form-item__label {
  padding: 0;
  /*width: 120px !important;*/
}

.dialog-footer {
  button {
    padding: 5px 30px;
    width: 139px;
    height: 38px;
    // background: #387DFF;
    border: 1px solid #E8ECEF;
    border-radius: 19px;
    font-size: 16px;
  }
}

::v-deep .el-dialog {
  border-radius: 10px;
}

::v-deep .el-dialog__header {
  .el-dialog__title {
    font-size: 22px;
    font-weight: bolder;
  }

  .el-dialog__headerbtn {
    i {
      position: absolute;
      border: 3px solid #fff;
      top: -50px;
      left: 30px;
      color: #fff;
      border-radius: 30px;
      font-size: 24px;
      font-weight: bolder;
    }
  }
}

.xs {
  display: none;
}

.xl {
  display: block;
}

::v-deep .el-dialog__body {
  .qw_date .el-form-item__label {
    margin-left: 120px;
  }

  .el-form {
    .el-form-item {
      .el-form-item__label {}

      .el-form-item__content {}
    }
  }
}

::v-deep .upload-demo1 {
  .el-upload {
    display: none;
  }
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}

@media (max-width: 768px) {
  ::v-deep .qw_date .el-form-item__content .el-date-editor {
    width: 100%;
  }

  .el-main {
    margin: 0;
    padding: 0;
  }

  .xs {
    display: block;
  }

  .xl {
    display: none;
  }


  .b_bon {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;
  }

  ::v-deep .el-dialog__header {
    .el-dialog__headerbtn {
      i {
        position: initial;
        border: 3px solid #fff;
        top: -50px;
        left: 30px;
        color: #909399;
        border-radius: 30px;
        font-size: 24px;
        font-weight: bolder;
      }
    }
  }

  ::v-deep .el-dialog__body {
    .el-form {
      .el-form-item {
        .el-form-item__label {
          width: 60px !important;
          line-height: 20px !important;
        }

        .el-form-item__content {
          margin-left: 60px !important;
        }
      }

      .qw_date {
        .el-form-item {
          .el-form-item__label {
            margin: 0;
            width: 100px !important;
            margin-left: 100px !important;
          }

          .el-form-item__content {
            .el-date-editor {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
